<template>
    <div>
      <div class="title">热销推荐</div>
      <ul>
        <router-link
          tag="li"
          class="item border-bottom"
          v-for="item in list"
          :key="item.id"
          :to="'/detail/'+item.id"
        >

              <div>
                <img class="item-img" :src="item.imgUrl" :alt="item.title">
              </div>

              <div class="item-info">
                <p class="item-title">{{item.title}}</p>
                <p class="item-desc">{{item.desc}}</p>

                <div class="item-price">
                  <span>{{item.price}}</span>
                  <span>杭州</span>
                </div>
              </div>

        </router-link>

      </ul>
    </div>
</template>

<script>
    export default {
        name: "HomeRecommend",
        props:{
          list:Array
        }
    }
</script>

<style lang="stylus" scoped>
  //@import '~styles/border.css'   //为什么写这个不可以，写下面这个可以。
  //@import '../../../assets/styles/border.css'
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .title
    background: #eeeeee
    margin-top:.2rem
    line-height:0.8rem
    text-indent:0.2rem
  .item
    width: 100%
    padding-top:0.1rem
    height:1.9rem
    display:flex
    .item-img
      width:1.7rem
      height:1.7rem
      padding:0.1rem
    .item-info
      flex:1
      padding:0.1rem
      min-width:0
      .item-title
          line-height:0.54rem
          font-size:0.32rem
          background:#e0e0e0;
      .item-desc
           line-height:0.54rem
           background:green
           //ellipsis()
           overflow:hidden;
           text-overflow:ellipsis;
           white-space:nowrap;
      .item-price
           line-height:0.44rem
           background:#9966ff
           margin-top:0.16rem
           padding: 0 .2rem
           border-radius: .06rem


</style>
